<template>
  <div class="pages receiptEdit">
    <div class="operationBox tableSearch">
      <el-button type="primary" @click="goBack()" size="mini">返回</el-button>
      <el-button type="primary" @click="toPay()" v-if="remsPrice!='0.00'&&type!='3'" size="mini">去支付</el-button>
    </div>
    <el-form :model="formdata" ref="formdata" label-width="120px" size="mini" class="box-content">
      <el-row>
        <el-col :span="8">
          <el-form-item label="供应商 :" prop="supplierName" v-if="paymentStatusArray=='采购付款'">
            <span>{{formdata.supplierName}}</span>
          </el-form-item>
          <el-form-item label="企业名称 :" prop="supplierName" v-if="paymentStatusArray=='退货付款'">
            <span>{{formdata.shopName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单号 :">
            <span>{{formdata.saleCode}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="单据日期 :" prop="receiveDate">
            <span>{{formdata.orderDate}}</span>
            <!-- <el-date-picker v-if="showTab === 2" v-model="formdata.receiveDate" format="yyyy年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择交货日期"></el-date-picker> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款类型 :">
            <span>{{paymentStatusArray}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" v-if="type!='2'">
          <el-form-item label="订单状态 :">
            <span>{{saleStatusArray}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="type=='2'">
        <el-col :span="8">
          <el-form-item label="已付金额 :" prop="receiveDate">
            <span>{{paidPrices}} 元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="剩余金额 :">
            <span>{{remainingPrices}} 元</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="type=='2'">
        <el-col :span="8">
          <el-form-item label="赊销日期 :" prop="receiveDate">
            <span>{{creditTimes}}</span>
            <!-- <el-date-picker v-if="showTab === 2" v-model="formdata.receiveDate" format="yyyy年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择交货日期"></el-date-picker> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="赊销金额 :">
            <span>{{creditPrices}} </span><span v-if="creditPrices!=undefined">元</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 订单信息 -->
    <div class="from_main infon">
      <div class="infon_text">
        <span class="infon_shu"></span>
        <span class="infon_text_t">订单信息</span>
      </div>
    </div>
    <cope-with :formdata="formdata" :confirmtype="confirmtype" :tableData="tableData" :isConfirm="isConfirm" :hasConfirmCai="hasConfirmCai" style="margin-top:20px;"></cope-with>

    <div class="from_main infon" v-if="type=='2'||type=='3'">
      <div class="infon_text">
        <span class="infon_shu"></span>
        <span class="infon_text_t">付款信息</span>
      </div>
      <el-table :data="payList" border style="width:80%;">
        <el-table-column prop="payTime" label="付款时间" align="center" :formatter="trunTime">
        </el-table-column>
        <el-table-column prop="price" label="付款金额" align="center">
        </el-table-column>
        <el-table-column prop="creditTime" label="赊销日期" align="center" :formatter="trunTime">
        </el-table-column>
        <el-table-column prop="payType" label="付款方式" align="center" :formatter="payTypes">
        </el-table-column>
        <el-table-column prop="remainderPrice" label="剩余金额" align="center">
        </el-table-column>
      </el-table>
    </div>
    <el-dialog class="addshopname" title="付款" :visible.sync="dialogFormVisible" width="610px">
      <el-form :model="form" center :rules="rules" ref="form">
        <el-form-item label="付款方式：" :label-width="formLabelWidth">
          <el-select class="selecttype" size="small" v-model="form.tradeType" placeholder="付款方式">
            <el-option label="在线支付" value="2" v-if="orderType=='0'"></el-option>
            <el-option label="线下支付" value="1"></el-option>
            <el-option label="预付款支付" value="3" v-if="prePay==1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款时间：" :label-width="formLabelWidth" v-if="form.tradeType=='1'">
          <el-date-picker v-model="form.deliveryDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择付款时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="付款金额：" :label-width="formLabelWidth" v-if="form.tradeType=='1'">
          <sd-input :val.sync='form.money' placeholder="请输入充值金额" style="width:120px;float:left; "></sd-input>
          <span style='margin-left: 10px'>元</span>
        </el-form-item>
        <el-form-item label="预付款余额：" :label-width="formLabelWidth" v-if="form.tradeType=='3'">
          <span>{{orderPrice}} 元</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" center>
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="orderPay()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import SdInput from "@/components/SdInput";
import pageUnit from "components/Page";
import CopeWith from "@/components/CopeWith";
import u from "@/util";
import {
  orderDetails,
  orderPay,
  getGoodsPurchaseDetails,
  selectOrderGoodsPurchaseReturnDetail,
  payTypeList,
  preAccountList
} from "@/api";
import s from "@/util/state";
export default {
  components: { SdInput, pageUnit, CopeWith },
  data() {
    return {
      orderType: "0",
      remsPrice: "",
      circle: "",
      orderPrice: "",
      paidPrices: "",
      remainingPrices: "",
      creditTimes: "",
      creditPrices: "",
      prePay: "",
      zjPay: "",
      payeeId: "",
      payerId: "",
      rules: {
        // deliveryDate: [
        //   { required: true, message: "请输选择付款时间", trigger: "blur" }
        // ],
        // money: [
        //   { required: true, message: "请输入付款金额", trigger: "change" }
        // ]
      },
      payTypes: s.payTypes,
      paymentStatusArray: "", // 收付款状态数组
      saleStatusArray: "", // 订单状态数组
      type: "",
      orderNo: "",
      payList: [],
      form: {
        operPrice: "",
        deliveryDate: "",
        tradeType: "2"
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      formdata: {},
      tableData: [],
      isConfirm: true, // 是否进行过报货确认
      confirmtype: true,
      hasConfirmCai: false, // 是否是采购报货
      inStatus: ["已生成", "", "已退货"]
    };
  },
  computed: mapState([
    "sub",
    "merchantId",
    "power",
    "path",
    "linkName",
    "mobile",
    "userId"
  ]),
  created() {
    this.id = u.getQuery().id; // 查看id
    this.type = u.getQuery().type;
  },
  mounted() {
    this.getDataById();
  },
  methods: {
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    cancel() {
      this.form.tradeType = "2";
      this.$delete(this.form, "deliveryDate");
      this.form.deliveryDate === undefined;
      this.form.money = 0;
      this.dialogFormVisible = false;
    },
    toPay() {
      let postdata = {
        payeeId: this.payeeId,
        payerId: this.payerId
      };
      let postdataty = {
        payeeId: this.payerId,
        payerId: this.payeeId
      };
      if (this.formdata.paymentTypes == "2") {
        postdata = postdataty;
      }
      preAccountList(postdata).then(res => {
        this.orderPrice = res.data[0].price;
      });
      payTypeList(postdata).then(res => {
        this.prePay = res.data.prePay;
        this.zjPay = res.data.zjPay;
      });
      this.dialogFormVisible = true;
    },
    orderPay(formName) {
      if (
        this.form.tradeType == "1" &&
        (this.form.deliveryDate === null ||
          this.form.deliveryDate == "" ||
          this.form.deliveryDate === undefined)
      ) {
        this.$message({
          message: "请输选择付款时间"
        });
        return false;
      }
      if (
        this.form.tradeType == "1" &&
        (this.form.money <= 0 ||
          this.form.money == "" ||
          this.form.money === undefined)
      ) {
        this.$message({
          message: "付款金额应大于0"
        });
        return false;
      }
      let postdata = {
        orderNo: this.orderNo,
        payType: this.form.tradeType,
        price: this.form.money,
        payTime: this.form.deliveryDate
      };
      orderPay(postdata).then(res => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: "支付成功",
            type: "success"
          });
          // this.resetForm(formName);
          this.orderNo = "";
          this.form.tradeType = "2";
          this.$delete(this.form, "deliveryDate");
          this.form.deliveryDate === undefined;
          this.form.money = 0;
          this.getDataById();
          this.dialogFormVisible = false;
        }
      });
    },
    trunTime(row, column, cellValue) {
      if (row.payType == 1) {
        return u.foryear(cellValue);
      } else {
        return u.foryear(cellValue) + " " + u.fortime(cellValue);
      }
    },
    getdatetime(now, l = "-", m = ":") {
      now = parseInt(now);
      now = new Date(now);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      // let seconds = now.getSeconds()
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      return year + l + month + l + date;
    },
    getGoodsPurchaseDetails(id) {
      let data = {
        id: id
      };
      getGoodsPurchaseDetails(data).then(res => {
        this.formdata = JSON.parse(JSON.stringify(res.data));
        let a = [
          "已生成",
          "待审核",
          "已驳回",
          "待确认",
          "已取消",
          "待付款",
          "待收货",
          "已关闭",
          "已清",
          "销售方取消单据",
          "销售方关闭单据",
          "待发货"
        ];
        this.saleStatusArray = a[this.formdata.statusFlow];
        // this.formdata.supplierName = res.data.shopName;
        this.formdata.saleAmount = res.data.purchaseAmount;
        this.formdata.saleCode = res.data.purchaseCode;
        this.formdata.orderDate = this.getdatetime(res.data.orderDate);
        this.formdata.deliveryDate = this.getdatetime(res.data.deliveryDate);
        this.formdata.retreatData = true;
        this.tableData = res.data.goodsList;
      });
    },
    getDataBy(goodsSaleId) {
      let data = {
        id: goodsSaleId
      };
      selectOrderGoodsPurchaseReturnDetail(data).then(res => {
        this.formdata = JSON.parse(JSON.stringify(res.data));
        let a = ["已生成", "未同意", "待发货", "待收货", "待退款", "已完成"]; //退货订单状态
        this.saleStatusArray = a[this.formdata.purchaseStatus];
        this.tableData = res.data.goodsList;
        this.formdata.saleAmount = this.formdata.returnAmount;
        this.formdata.retreatData = false;
        this.formdata.purchaseAmount = res.data.formdataTotal;
        this.formdata.orderDate = this.getdatetime(res.data.orderDate);
        this.formdata.saleCode = res.data.purchaseinCode;
      });
    },
    getDataById() {
      let postdata = {
        id: this.id
      };
      orderDetails(postdata).then(res => {
        this.orderNo = res.data.orderDetail.orderNo;
        this.payerId = res.data.orderDetail.payerId;
        this.payeeId = res.data.orderDetail.payeeId;
        this.formdata.paymentTypes = res.data.orderDetail.paymentType;
        this.paidPrices = res.data.orderDetail.paidPrice;
        this.remainingPrices = res.data.orderDetail.remainingPrice;
        this.orderType = res.data.orderDetail.orderType;
        if (this.orderType == "1") {
          this.$set(this.form, "tradeType", "1");
        }
        if (res.data.orderDetail.creditTime != undefined) {
          // console.log(res.data.orderDetail.creditTime);
          this.creditTimes = this.getdatetime(res.data.orderDetail.creditTime);
        }
        // console.log(res.data.orderDetail.creditPrice);
        this.creditPrices = res.data.orderDetail.creditPrice;
        let b = ["", "采购付款", "退货付款"];
        this.paymentStatusArray = b[res.data.orderDetail.paymentType];
        this.payList = res.data.payList;
        this.remsPrice = (
          parseFloat(res.data.orderDetail.orderPrice) -
          parseFloat(res.data.orderDetail.paidPrice) -
          parseFloat(res.data.orderDetail.unconfirmedPrice)
        ).toFixed(2);
        // console.log(typeof this.remsPrice);
        // console.log(this.remsPrice);
        if (res.data.orderDetail.paymentType == 1) {
          this.getGoodsPurchaseDetails(res.data.orderDetail.purchaseId);
        } else if (res.data.orderDetail.paymentType == 2) {
          this.getDataBy(res.data.orderDetail.salesId);
        }
      });
    },
    rechargeSure() {},
    // 分配权限
    setRole(key) {
      return u.selectTitle(this.power, key);
    },
    // 处理审核状态
    // 点击返回按钮
    goBack() {
      history.back();
    }
  }
};
</script>
<style scoped>
.th-right {
  margin-top: 30px;
}
.from_main {
  margin-top: 10px;
  margin-bottom: 30px;
}
.box-content {
  margin-top: 10px;
}
</style>
